<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务完成详情页面</title>
    <link rel="stylesheet" href="./css/taskDetails.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <script type="module" src="./js/taskDetails.js"></script>
    <script src="./js/flexible.js"></script>
  </head>
  <body>
    <!-- 顶栏 -->
    <div class="topPreset">
      <a href="javascript:;">
        <span class="iconfont icon-xiangzuo1"></span>
      </a>
      <h2>任务详情页面</h2>
    </div>
    <!-- 顶部站位 -->
    <div class="zhanwei"></div>
    <!-- 基本信息 -->
    <div class="essential">
      <div class="wrapper">
        <div class="info">
          <h4>基本信息</h4>
          <span>（任务编号:）</span>
          <!-- 展开 -->
          <div id="unfold">+</div>
        </div>
        <!-- 折叠层 -->
        <div class="hideEssential">
          <div class="content">
            <!-- 地址 -->
            <div class="address">
              <div class="go">
                <span class="slit">
                  起
                </span>
                <p>北京市昌平区回龙观街道西三旗桥东金55555555555</p>
              </div>
              <div class="pit">

              </div>
              <div class="to">
                <span class="slit">
                  止
                </span>
                <p>河南省郑州市路北区北清路99号</p>
              </div>
            </div>
            <!-- 司机电话发货日期等 -->
            <div class="text">
              <ul>
                <li>
                  <p>联系人</p>
                  <span class="name">张三</span>
                </li>
                <li>
                  <p>联系电话</p>
                  <span class="phone">13512345678</span>
                  <img src="./image/电话_填充 2.png" alt>
                </li>
                <li>
                  <p>提货时间</p>
                  <span class="timego">2022.05.04 13:00</span>
                </li>
                <li>
                  <p>预计送达时间</p>
                  <span class="timeto">2022.05.05 10:00</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 车辆司机信息 -->
    <div class="driver">
      <div class="wrapper">
        <div class="info">
          <h4>车辆司机信息</h4>
          <div id="fold">+</div>
        </div>
        <!-- 用于折叠隐藏  -->
        <div class="hideDrive">
          <!-- 车牌号 -->
          <div class="plate">
            <div class="number">
              车牌号
            </div>
            <span class="num">动态渲染车牌号</span>
          </div>
          <div class="driverName">
            <div class="name">司机姓名</div>
            <span class="uname">动态渲染司机姓名</span>
          </div>
        </div>

      </div>
    </div>
    <!-- 运输路线 -->
    <div class="transRoutes">
      <div class="wrapper">
        <div class="info">
          <h4>运输路线</h4>
          <div id="fold">+</div>
        </div>
        <!-- 折叠区 -->
        <div class="find">
          <ul>
            <li class="go">
              <div>北京市</div>
              <p>北京市</p>
            </li>
            <li class="img">
              <img src="./image/img_jiantou.png" alt>
            </li>
            <li class="destination">
              <div>河南省</div>
              <p>郑州市</p>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <!-- 提货信息 -->
    <div class="Delivery">
      <div class="wrapper">
        <div class="info">
          <h4>提货信息</h4>
          <div id="fold">+</div>
        </div>
        <!-- 用于折叠 -->
        <div class="hidedeli">
          <!-- 汇单凭证 -->
          <div class="voucher">
            <p>回单凭证</p>
            <ul>
              <li>
                <img src="./image/收据1.png" alt>
              </li>
              <li>
                <img src="./image/收据2.png" alt>
              </li>
            </ul>
          </div>
          <!-- 货品照片 -->
          <div class="goodsImag">
            <p>
              货品照片
            </p>
            <ul>
              <li><img src="./image/货品1.png" alt></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 交货信息 -->
    <div class="deliveryInfo">
      <div class="wrapper">
        <div class="info">
          <h4>交货信息</h4>
          <div id="fold">+</div>
        </div>
        <!-- 折叠层 -->
        <div class="hideInfo">
          <!-- 汇单凭证 -->
          <div class="voucher">
            <p>回单凭证</p>
            <ul>
              <li>
                <img src="./image/收据1.png" alt>
              </li>
              <li>
                <img src="./image/收据2.png" alt>
              </li>
            </ul>
          </div>
          <!-- 货品照片 -->
          <div class="goodsImag">
            <p>
              货品照片
            </p>
            <ul>
              <li><img src="./image/货品1.png" alt></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 货物信息 -->
    <div class="goodsInfo">
      <div class="wrapper">
        <div class="info">
          <h4>货物信息
            <span>共计30单</span>
          </h4>
          <div id="unfold">+</div>
        </div>
        <!-- 用于折叠隐藏 -->
        <div class="hidegoods">
          <!-- 搜索 -->
          <div class="serch">
            <div><img src="./image/搜索.png" alt></div>
            <input type="text" placeholder="请输入单号">
          </div>
          <ul>
            <li class="detail">
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>1件</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>2件</span>
              <span>6kg</span>

            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>

            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
            <li>
              <span>SD1234567890123</span>
              <span>1件</span>
              <span>5kg</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--  -->
    <!-- 异常信息 -->
    <div class="abnormal">
      <div class="wrapper">
        <div class="info">
          <h4>异常信息</h4>
          <div id="fold">+</div>
        </div>
        <!-- 内容用于隐藏 -->
        <div class="content">
          <ul>
            <li class="report">
              <p>上报时间</p>
              <span>2023.09.06 7:00</span>
            </li>
            <li class="typeS">
              <p>异常类型</p>
              <span>照明失灵</span>
              <a href="javascript:;"><img src="./image/右向箭头.png" alt></a>
            </li>
            <li class="outcome">
              <p>
                处理结果
              </p>
              <span>继续运输</span>
            </li>
          </ul>
          <ul>
            <li class="report">
              <p>上报时间</p>
              <span>2023.09.05 8:00</span>
            </li>
            <li class="typeS">
              <p>异常类型</p>
              <span>有异常响动</span>
              <a href="javascript:;"><img src="./image/右向箭头.png" alt></a>
            </li>
            <li class="outcome">
              <p>
                处理结果
              </p>
              <span>继续运输</span>
            </li>
          </ul>
          <ul>
            <li class="report">
              <p>上报时间</p>
              <span>2023.09.05 8:00</span>
            </li>
            <li class="typeS">
              <p>异常类型</p>
              <span>有异常响动</span>
              <a href="javascript:;"><img src="./image/右向箭头.png" alt></a>
            </li>
            <li class="outcome">
              <p>
                处理结果
              </p>
              <span>继续运输</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>